<template>
  <view class="content" :style="{ paddingTop: CustomBar + 'px' }">
    <view
      class="contain_tab flex-row justify-center items-center"
      :style="{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }"
    >
      <view class="flex items-center w100 tabbar">
        <text class="store_name c_f">一起中，冲冲冲</text>
        <view class="share"  v-if="isLogin">
          <image
            src="../../static/index/share.png"
            mode="widthFix"
            class="share-img"
          ></image>
            <button class="share-btn" open-type="share"></button>
          </view>
      </view>
    </view>
    <view class="bgred" style="position: relative">
      <view class="add-wx" v-if="showTip == 1">
        <view class="add-wx-title">点击“...”，添加至我的小程序</view>
        <image
          class="add-wx-icon"
          src="@/static/close-white.svg"
          mode="widthFix"
          @click="closeTip"
        ></image>
      </view>
      <view class="flex flex-row justify-between items-center w100">
        <view
          class="flex flex-col justify-center items-center w50"
          @tap="goUrl('/subpageB/choujiang_count/choujiang_count', true)"
        >
          <view class="f_60"
            >{{ userInfo.integral ? userInfo.integral : "0" }}
            <text class="f_22">积分</text>
          </view>
          <view class="flex flex-row justify-center f_22 items-center"
            >去兑换 <u-icon name="arrow-right" size="10" color="#fff"></u-icon
          ></view>
        </view>
        <view
          class="flex flex-col justify-center items-center w50"
          @tap="goUrl('/subpageC/user_withdraw/user_withdraw', true)"
        >
          <view class="f_60"
            >{{ userInfo.nowMoney ? userInfo.nowMoney : "0" }}
            <text class="f_22">元</text>
          </view>
          <view class="flex flex-row justify-center f_22 items-center"
            >转零钱 <u-icon name="arrow-right" size="10" color="#fff"></u-icon
          ></view>
        </view>
      </view>
      <view class="menu flex flex-row justify-between items-center">
        <view
          class="flex flex-col items-center justify-center menu-item"
          @tap="goUrl(item.url, item.login)"
          v-for="(item, index) in menu"
          :key="index"
        >
          <view class="tip" v-if="index == 0 && !userInfo.isDaySign"
            >待签到</view
          >
          <image :src="item.icon" mode="widthFix" class="icon"></image>
          <text class="f_24 mt_10">{{ item.text }}</text>
        </view>
      </view>
    </view>
    <view class="list flex flex-col justify-center items-center">
      <view
        class="flex flex-col justify-start item"
        @longpress="longpressClick"
        @touchend="handleTouchEnd"
        v-for="(item, index) in list"
        :key="index"
        @click="
          $util.Tips(
            `/subpageB/choujiang_detail/choujiang_detail?id=${item.id}`
          )
        "
      >
        <!-- 普通抽奖 -->
        <template v-if="item.type == 1">
          <image
            v-if="item.prizes[0].imageUrl && item.prizes[0].imageUrl != ''"
            class="banner"
            :src="item.prizes[0].imageUrl"
            mode="aspectFill"
          ></image>
          <view class="info flex flex-col justify-start" :style="styleBox">
            <view class="c_0 f_30 title">
              {{ item.title }} <text
                class="newtag"
                v-for="(item1, index1) in item.showtype"
                :key="index1"
                >{{ item1 }}</text
              >
            </view>
            <view class="award-img" style="width: 100%;text-align: center;">
              <img :src="item.image" style="width: 300rpx;height: 300rpx">
            </view>
            <view
              class="tag flex flex-row justify-start items-center"
              v-if="item.showtype.length > 0"
            >
             
              <template v-if="item.status == 2">
                <view class="flex flex-row items-center title_ell">
                  <!-- 判断是否为今天  是的话显示倒计时 -->
                    <text class="f_22 c_f bg-red pd10">抽奖中</text>
                </view>
              </template>
              <template v-if="item.status == 1">
                <view class="flex flex-row items-center title_ell">
                  <!-- 判断是否为今天  是的话显示倒计时 -->
                  <template v-if="isToday(item.openTime)">
                    <text class="f_22 c_f bg-red pd10">即将开奖</text>
                    <count-down :is-day="false" :tip-text="' '" :day-text="' '" :hour-text="':'" :minute-text="':'"
                      :second-text="' '" :datatime="item.openTimeStamp/1000" :bgColor="bgColor">
                    </count-down>
                  </template>
                  <template v-else>
                    <view class="f_24 c_9"><text class="red">{{ item.openTime }}</text> 开奖</view>
                  </template>
                  <text
                    v-if="item.minPeople - item.recordCount > 0"
                    class="f_26 c_9"
                    >,还差<text class="ml5 red mr5">{{
                      item.minPeople - item.recordCount
                    }}</text
                    >人参与</text
                  >
                </view>
              </template>
            </view>
            <view
              class="autho_info flex flex-row justify-between w100 items-center mt_10"
            >
              <view class="autho_img flex flex-row justify-start items-center">
                <image
                  v-if="item.merchant.logo"
                  :src="item.merchant.logo"
                  mode="widthFix"
                  class="autho"
                ></image>
                <image
                  v-else
                  src="@/static/logo.png"
                  mode="aspectFit"
                  class="autho"
                ></image>

                <image
                  src="@/static/index/v.png"
                  mode="widthFix"
                  class="v-icon"
                ></image>
                <text class="f_24 c_5a">{{
                  item.merchant.name ? item.merchant.name : "平台"
                }}</text>
              </view>
              <view class="auth_btn f_30 c_f" v-if="item.status == 1">
                点击参与
              </view>

              <view class="auth_btn f_30 c_f" v-if="item.status == 2">
                去抽奖
              </view>
            </view>
          </view>
        </template>
        <!-- 红包抽奖 -->
        <template v-else>
          <text v-if="item.money" class="money">￥{{ item.money }}</text>
          <image
            class="banner"
            src="@/static/index/money.png"
            mode="widthFix"
          ></image>
          <view class="info flex flex-col justify-start">
            <view class="c_0 f_30 title">
              {{ item.title }}
            </view>
            <view
              class="tag flex flex-row justify-start items-center"
              v-if="item.showtype.length > 0"
            >
              <text
                class="newtag"
                v-for="(item1, index1) in item.showtype"
                :key="index1"
                >{{ item1 }}</text
              >
            <template v-if="item.status == 1">
              <view class="flex flex-row items-center title_ell">
                <!-- 判断是否为今天  是的话显示倒计时 -->
                <template v-if="isToday(item.openTime)">
                  <text class="f_22 c_f bg-red kjbtn">即将开奖</text>
                  <count-down :is-day="false" :tip-text="' '" :day-text="' '" :hour-text="':'" :minute-text="':'"
                    :second-text="' '" :datatime="item.openTimeStamp/1000" :bgColor="bgColor">
                  </count-down>
                </template>
                <template v-else>
                  <view class="f_24 c_5a">{{ item.openTime }}</view>
                </template>

                <text
                  v-if="item.minPeople - item.recordCount > 0"
                  class="f_26 c_9"
                  >,还差<text class="ml5 red mr5">{{
                    item.minPeople - item.recordCount
                  }}</text
                  >人</text
                >
              </view>
            </template>

            </view><view
              class="autho_info flex flex-row justify-between w100 items-center"
            >
              <view class="autho_img flex flex-row justify-start items-center">
                <image
                  v-if="item.merchant.logo"
                  :src="item.merchant.logo"
                  mode="widthFix"
                  class="autho"
                ></image>
                <image
                  v-else
                  src="@/static/logo.png"
                  mode="aspectFit"
                  class="autho"
                ></image>

                <image
                  src="@/static/index/v.png"
                  mode="widthFix"
                  class="v-icon"
                ></image>
                <text class="f_24 c_5a">{{
                  item.merchant.name ? item.merchant.name : "平台"
                }}</text>
              </view>
              <view class="auth_btn f_30 c_f" v-if="item.status == 1">
                点击参与
              </view>

              <view class="auth_btn f_30 c_f" v-if="item.status == 2">
                去抽奖
              </view>
            </view>
          </view>
        </template>
      </view>
    </view>

    <view
      v-if="userInfo && userInfo.relateId"
      class="qd"
      @click="$util.Tips('/pages/choujiang_add/choujiang_add')"
    >
      <image src="@/static/tab/1-a.png" mode="widthFix"></image>
    </view>
    <uni-popup ref="buypopup">
      <view class="buylist">
        <view style="text-align: right">
          <image
            class="close_icon"
            src="@/static/mine/close.svg"
            mode="widthFix"
            @click="closePop"
          ></image>
        </view>
        <view style="text-align: center">
          <img
            style="width: 200rpx; height: 200rpx"
            :src="merInfo.logo ? merInfo.logo : 'https://tcjyh2022.oss-cn-hangzhou.aliyuncs.com/wechat/csqx_zhong.png' "
            alt=""
          />
		  <view style="font-size: 24rpx;font-weight: bold;margin: 20rpx 0">
			<text>欢迎您登录一起中抽奖平台</text><br>
		  	<text>祝您好运连连</text>
		  </view>
        </view>
        <view class="btn" @click="loginAndSub">订阅商家{{merInfo.name}}</view>
      </view>
    </uni-popup>
    <block v-if="isPhoneBox">
      <routinePhone
        :isPhoneBox="isPhoneBox"
        @close="bindPhoneClose"
        :authKey="authKey"
      >
      </routinePhone>
    </block>
    <listFooter :loadtitle="loadtitle"></listFooter>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import routinePhone from "@/components/login_mobile/routine_phone.vue";
import { drawList, storesubscribe, storeInfo, drawInfo } from "@/api/activity.js";
import { getUserInfo } from "@/api/user.js";
import Routine from "@/libs/routine";
import countDown from '@/components/countDown/index.vue'
import listFooter from "../../components/listFooter/listFooter.vue";
import { toLogin } from "../../libs/login";
export default {
  computed: mapGetters(["isLogin", "chatUrl", "userInfo", "uid"]),
  components: {
    routinePhone,countDown,listFooter
  },
  data() {
    return {
      isPhoneBox: false,
      authKey: "",
      styleBox: "background-color: #ffffff;", // 默认白色背景
      page: 1,
      limit: 10,
      loading: false,
      loadend: false,
      loadtitle: '暂无数据',
      list: [],
      title: "Hello",
      CustomBar: this.CustomBar,
      StatusBar: this.StatusBar,
      showTip: 1,
      menu: [
        {
          icon: "../../static/index/ic_01.png",
          text: "每日签到",
          url: "/pages/point_sign/point_sign",
          login: true
        },
        {
          icon: "../../static/index/ic_02.png",
          text: "兑换商城",
          url: "/pages/point_store/point_store",
          login: false
        },
        {
          icon: "../../static/index/ic_03.png",
          text: "代开发",
          url: "/subpageC/tuiguang/tuiguang?id=1",
          login: false
        },
        {
          icon: "../../static/index/ic_04.png",
          text: "0元入驻",
          url: "/subpageC/tuiguang/tuiguang?id=2",
          login: false
        },
      ],
      merInfo: {},
      arr_shu: [505,   
          496,  
        501,   
        488,   
        487,   
        502,
        498,
        485,
        495,
        490,
        486,
        504,
        484,
        477,
        465,
        467,
        480,
        479,
        475,
        466,
        472,
        482,
        483,
        463,
        454,
        452,
        456,    
        444,
        457,
        458,
        447,
        459,
        451,
        436,
        434,
        430,
        429,
        426,
        425,
        421,
        420,
        417,
        416,
        413
]               
    };
  },
  onShareAppMessage(res) {
    return {
      title: '好友邀请你一起抽奖啦！',
      path: '/pages/index/index?spreadId=' + this.uid,
      imageUrl: "https://tcjyh2022.oss-cn-hangzhou.aliyuncs.com/wechat/csqx_zhong.png"
    }
  },
  onPullDownRefresh() {
    this.list = []
    this.page=1
    this.loadend = false
    this.getlist();
    if (this.isLogin) {
      this.$store.dispatch("USERINFO");
    }
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  onReachBottom() {
    this.page++
    this.getlist();
  },
  onLoad(options) {
    // 二维码场景
    if (options.scene) {
      let str = decodeURIComponent(options.scene); // relateId=10
      if (str) {
       let arr = str.split('=')
       if (arr[0] == 'relateId') {
        this.relateId = arr[1];
        this.getInfo()
        
       }
      }
    }
    if (options.spreadId) {
      console.log(options.spreadId, 'options.spreadId---')
      this.$store.commit("setSpreadId", options.spreadId);
    }
    let showTip = uni.getStorageSync("showTip");
    if (showTip == 2) {
      this.showTip = 2;
    }
    this.test()
  },
  onShow: function () {
    if (this.isLogin) {
      this.$store.dispatch("USERINFO");
    }
    this.loadend = false
    this.page = 1
    this.list = []
    this.getlist();
  },
  
  methods: {
    async test() {
      let count = 0
      for (let i =0;i < this.arr_shu.length;i++) {
        let info = await drawInfo(this.arr_shu[i])
        count += info.data.drawNumber
      }
      console.log(count, 'count')
    },
    getInfo() {
      storeInfo({
					relateId: this.relateId
				}).then(res => {
					this.merInfo = res.data.merchant
          this.$refs.buypopup.open()
				})
    },
    loginAndSub() {
      if (this.isLogin) {
        this.sub(1, this.relateId);
      } else {
        let self = this;
        uni.showLoading({
          title: "正在登录中",
        });
        Routine.getUserProfile()
          .then((res) => {
            uni.hideLoading();
            Routine.getCode()
              .then((code) => {
                self.getWxUser(code, res);
              })
              .catch((res) => {
                uni.hideLoading();
              });
          })
          .catch((res) => {
            uni.hideLoading();
          });
      }
    },
    getWxUser(code, res) {
      console.log(res, "res----");
      let self = this;
      let userInfo = res.userInfo;
      userInfo.appId = "wxa219521f32c00a04";
      userInfo.code = code;
      userInfo.avatar = userInfo.userInfo.avatarUrl;
      userInfo.city = userInfo.userInfo.city;
      userInfo.country = userInfo.userInfo.country;
      userInfo.nickName = userInfo.userInfo.nickName;
      userInfo.province = userInfo.userInfo.province;
      userInfo.sex = userInfo.userInfo.gender;
      userInfo.type = "routine";
      Routine.authUserInfo(userInfo.code, userInfo)
        .then((res) => {
          self.authKey = res.data.key;
          if (res.data.type === "register") {
            uni.hideLoading();
            self.isPhoneBox = true;
          }
          if (res.data.type === "login") {
            uni.hideLoading();
            self.$store.commit("LOGIN", {
              token: res.data.token,
            });
            self.$store.commit("SETUID", res.data.uid);
            self.getUserInfo();
            this.sub(1, this.relateId);
          }
        })
        .catch((res) => {
          uni.hideLoading();
          uni.showToast({
            title: res.message,
            icon: "none",
            duration: 2000,
          });
        });
    },
    getUserInfo: function () {
      let that = this;
      getUserInfo().then((res) => {
        uni.hideLoading();
        that.userInfo = res.data;
        that.$store.commit("UPDATE_USERINFO", res.data);
      });
    },
    bindPhoneClose(data) {
      this.isPhoneBox = false;
      this.sub(1, this.relateId);
    },
    closeTip() {
      uni.setStorageSync("showTip", 2);
      this.showTip = 2;
    },
    sub(status, id) {
      storesubscribe({
        status,
        merchantId: id,
      }).then((res) => {
        uni.showToast({
          title: "订阅商家成功～",
          icon: "none",
        });
		this.$refs.buypopup.close()
      });
    },
    closePop() {
      this.$refs.buypopup.close()
    },
    toLogin() {
      toLogin()
    },
    goUrl(url, flag) {
      if (flag && !this.isLogin) {
        this.toLogin()
      } else {
        uni.navigateTo({
          url,
        });
      }
    },
    longpressClick() {
      this.styleBox = "background-color: #dcdcdc;";
    },
    handleTouchEnd() {
      this.styleBox = "background-color: #ffffff;";
    },
    //判断是否为今天
    isToday(e) {
      let date = new Date(e.replace(/-/g, "/"));
      const today = new Date();
      return (
        date.getDate() === today.getDate() &&
        date.getMonth() === today.getMonth() &&
        date.getFullYear() === today.getFullYear()
      );
    },
    gettype(item) {
      let arr = [];
      item.map((e, i) => {
        if (e.prizeType == 1) {
          if (e.receiveType == 1) {
            arr.push("物流");
          } else if (e.receiveType == 2) {
            arr.push("自提");
          }
        }
      });
      arr = [...new Set(arr)];

      return arr;
    },
    comtime(time) {
      const now = new Date().getTime();
      const futureDate = new Date(time.replace(/-/g, "/")).getTime();
      const countdown = futureDate - now;
      return countdown;
    },
    //获取列表
    getlist() {
      if (this.loading)
                return;
            if (this.loadend)
                return;
            this.loading = true;
            this.loadtitle = "";
        uni.showLoading({
          title: '加载中...'
        })
      drawList({
        page: this.page,
        limit: this.limit,
        multiStatus: '1,2'
      }).then((res) => {
        uni.hideLoading()
        res.data.list.map((item, index) => {
          item.showtype = []
          item.openTimeStamp = new Date(item.openTime).getTime()
          if (item.type == 1) {
            item.showtype = this.gettype(item.prizes);
          }
          if (item.autoOpen) {
            item.showtype.push("自动开奖");
          }
          if (item.onlyList) {
            item.showtype.push("粉丝抽奖");
          } else {
            item.showtype.push("一起中");
          }
        });
        uni.hideLoading()
        let list = res.data.list
        let loadend = list.length < this.limit;
        this.list = this.list.concat(list)
        this.loadend = loadend;
        this.loading = false;
        this.loadtitle = loadend ? "到底啦，没有数据了~" : "加载更多"
      });
    },
  },
};
</script>

<style lang="scss">
.close_icon {
  width: 34rpx;
}
.title_ell {
  flex: 1;
  overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.buylist {
  background: #fff;
  padding: 30rpx;
  border-radius: 20rpx;
  width: 650rpx;
  width: 500rpx;
  .btn {
    border-radius: 10rpx;
    background: #df4b43;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    height: 84rpx;
    color: #fff;
    font-size: 24rpx;
  }
}
.add-wx {
  position: absolute;
  top: 0;
  right: 20rpx;
  border-radius: 20rpx;
  background: rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10rpx;
  &-title {
    font-size: 24rpx;
    color: #fff;
  }
  &-icon {
    margin-left: 10rpx;
    width: 30rpx;
    height: 30rpx;
  }
}
.pd10 {
  padding: 0 8rpx;
  margin-right: 5rpx;
  border-radius: 8rpx;
}
.qd {
  image {
    width: 100rpx;
    position: fixed;
    bottom: 80rpx;
    right: 20rpx;
    animation: choujiang 3s infinite;
  }
}

@keyframes choujiang {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

.u-count-down {
  text {
    color: #df4b43 !important;
  }
}
.list {
  width: 710rpx;
  margin: 20rpx;
  .kjbtn {
    padding: 5rpx 10rpx;
    border-radius: 6rpx;
    margin-right: 10rpx;
  }
  .item {
    width: 100%;
    border-radius: 20rpx;
    background: #fff;
    margin-bottom: 25rpx;
    overflow: hidden;
    position: relative;
    .money {
      position: absolute;
      width: 100%;
      text-align: center;
      left: 0;
      top: 225rpx;
      font-size: 36rpx;
      color: #ffffc1;
      font-weight: bold;
    }
    .banner {
      width: 710rpx;
      height: 360rpx;
    }
    .tag {
      margin-top: 10rpx;
    }
    .newtag {
      border-radius: 6rpx;
      background: #fff6f6;
      font-size: 22rpx;
      color: #df4b43;
      margin-right: 10rpx;
      padding-left: 10rpx;
      padding-right: 10rpx;
      border-radius: 5rpx;
    }
    .autho_img {
      position: relative;
      .autho {
        width: 50rpx;
        height: 50rpx;
        border-radius: 50rpx;
        margin-right: 10rpx;
      }
      .v-icon {
        width: 21rpx;
        height: 21rpx;
        position: absolute;
        left: 40rpx;
        bottom: 0
      }
    }
    .info {
      width: 100%;
      padding: 20rpx;
      box-sizing: border-box;
    }
  }
}
.auth_btn {
  display: flex;
  padding: 10rpx 40rpx;
  justify-content: center;
  align-items: center;
  gap: 10rpx;
  border-radius: 50rpx;
  border: 4rpx solid #f3d7d4;
  background: linear-gradient(90deg, #ff783e 1.9%, #ed2b00 98.1%);
}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.contain_tab {
  position: fixed;
  z-index: 99;
  background-color: #df4b43;
  width: 100%;
  left: 0;
  top: 0;
  .tabbar {
    width: 100%;
    position: relative;
    padding-left: 30rpx;
    .share {
      margin-left: 40rpx;
      position: relative;
      display: flex;
      &-img {
        width: 40rpx;
        left: 40rpx;
      }
      &-btn {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
      }
    }
  }
}
.bgred {
  padding: 30rpx 0;
  padding-bottom: 0;
}
.w50 {
  width: 50%;
  color: #fff;
}
.menu {
  width: 710rpx;
  background-color: #fff;
  border-radius: 20rpx;
  margin-left: 20rpx;
  margin-top: 40rpx;
  padding: 24rpx 0;
  .icon {
    width: 60rpx;
  }
  .menu-item {
    position: relative;
    overflow: auto;
    width: 25%;
    padding-top: 10rpx;
    .tip {
      background-color: #df4b43;
      position: absolute;
      left: 20%;
      top: 0;
      margin-left: 60rpx;
      font-size: 20rpx;
      color: #fff;
      padding: 5rpx 8rpx;
      border-radius: 16rpx 16rpx 16rpx 0;
    }
  }
}
</style>
